<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>徽章</title>
</head>
<body>
    <!-- 在span标签内使用.badge类来创建一个徽章 -->
    <!-- 徽章的大小会随着标题级别而变化 -->
    <h1>1级标题 <span class="badge badge-secondary">New</span></h1>
    <h2>2级标题 <span class="badge badge-secondary">New</span></h2>
    <h3>3级标题 <span class="badge badge-secondary">New</span></h3>
    <h4>4级标题 <span class="badge badge-secondary">New</span></h4>
    <h5>5级标题 <span class="badge badge-secondary">New</span></h5>
    <h6>6级标题 <span class="badge badge-secondary">New</span></h6>
    <hr>
    <!-- 修改徽章的颜色 -->
    <span class="badge badge-primary">primary</span>
    <span class="badge badge-secondary">secondary</span>
    <span class="badge badge-success">success</span>
    <span class="badge badge-danger">danger</span>
    <span class="badge badge-warning">warning</span>
    <span class="badge badge-info">info</span>
    <span class="badge badge-light">light</span>
    <span class="badge badge-dark">dark</span>
    <hr>
    <!-- 胶囊徽章 -->
    <span class="badge badge-primary badge-pill">primary</span>
    <span class="badge badge-secondary badge-pill">secondary</span>
    <span class="badge badge-success badge-pill">success</span>
    <span class="badge badge-danger badge-pill">danger</span>
    <span class="badge badge-warning badge-pill">warning</span>
    <span class="badge badge-info badge-pill">info</span>
    <span class="badge badge-light badge-pill">light</span>
    <span class="badge badge-dark badge-pill">dark</span>
</body>
</html>